<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_Table 布局</title>
    <style>
        .box{
            height:200px;
            width: 200px;
            display: table-cell;
            text-align: center;
            border: 1px solid #ccc;
            vertical-align: middle;
        }


        .text1{
            border:1px solid #f20;
            width: 240px;
            line-height: 30px;
            display: inline-block;
            color: #000000;
            text-align: left;
        }

        p{
            width: 200px;
            background: #f20;
            line-height: 30px;
            display: inline-block;
            color: #fff;
            margin: 0px;
        }

        .text2{
            margin-top: 5px;
            height:40px;
            line-height: 40px;
            font-size: 20px;
        }


    </style>
</head>
<body>
    <!-- 图片本身是 inline-block 元素,那么只需要给父级加个 display:table-cell 就好了-->
    <div class="box">
        <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
    </div>
    <!-- 如果我们 有一个div 没有指定 class 会变成每个都占用一行变成了 那么这个div 下面的div 也受到影响了 -->
    <div class="box">
        <p class="text1">水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中</p>
    </div>
    <div class="box">
        <p>水平居中水平</p>
        <p class="text2">垂直居中垂直居中</p>
    </div>
</body>
</html>